<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>罐头</li>
    <li>大猪蹄子</li>
  </ul>
</body>
<script>
  "use strict"; {
    // 闭包应用-点击li输出当前li的索引号
    // 1.我们可以利用动态添加属性的方式
    let lis = document.querySelector("ul").querySelectorAll("li");
    for (var i = 0; i < lis.length; i++) { //注意此时的使用let的结果
      lis[i].index = i; //利用动态属性保存了
      lis[i].addEventListener("click", (e) => {
        console.log(e.target.index);
      });
    };
    // 2.利用闭包的方式得到当前小li的索引号
    for (var i = 0; i < lis.length; i++) {
      // 创建4个立即循环的函数
      ((i) => {
        lis[i].addEventListener("click", () => {
          console.log(`利用闭包了`, i);
        });
      })(i);
    };
  }; {
    // 闭包应用 3秒钟之后，打印所有li元素的内容
    let lis = document.querySelector("ul").querySelectorAll("li");
    for (var i = 0; i < lis.length; i++) {
      ((i) => {
        setTimeout(() => {
          console.log(lis[i].innerHTML);
        }, 3000);
      })(i);
    };
  };
</script>

</html>